<template>
  <el-row>
    <el-col :span="12">
      <div class="grid-content bg-purple">
        <div class="avatar-wrapper">
          <e-avatar class="avatar" :src="studentDetailInfo.headPicture" />
          <div style="margin-bottom: 0" v-if="!isDialog">
            <span class="link" @click="gotoChart">查看身体数据</span>
          </div>
        </div>
        <el-row class="detail_row" v-for="(item, index) in leftList" :key="index">
          <div class="detail_row_left">{{item.title}}：<span :title="item.content">{{item.content}}</span></div>
          <div class="form-help">{{item.en}}</div>
        </el-row>
      </div>
    </el-col>
    <el-col :span="12">
      <div class="grid-content bg-purple">
        <template v-for="(item, index) in rightList">
          <template v-if="index > 0">
            <el-row class="detail_row" :key="index">
              <div class="detail_row_left">{{item.title}}：<span :title="item.content">{{item.content}}</span></div>
              <div class="form-help">{{item.en}}</div>
            </el-row>
          </template>
          <template v-else>
            <el-row class="detail_row" :style="{'padding-top': !isDialog ? '136px' : '114px'}" :key="index">
              <div class="detail_row_left">{{item.title}}：<span :title="item.content">{{item.content}}</span></div>
              <div class="form-help">{{item.en}}</div>
            </el-row>
          </template>
        </template>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  props: {
    studentDetailInfo: {
      type: Object
    },
    isDialog: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      leftList: [],
      rightList: [],
      titleSpan: 7,
      contentSpan: 16
    }
  },
  watch: {
    studentDetailInfo () {
      this._initData()
    }
  },
  created () {
    this._initData()
  },
  methods: {
    _initData () {
      let studentInfo = this.studentDetailInfo
      this.leftList = [
        { title: '姓名', en: 'Full Name', content: studentInfo.name },
        { title: '国籍', en: 'Nation', content: studentInfo.nationalityName ? studentInfo.nationalityName : '待完善' },
        { title: '民族', en: 'Ethnicity', content: studentInfo.nation ? studentInfo.nation : '待完善' },
        { title: '出生日期', en: 'Birth Date', content: studentInfo.birthday ? new Date(studentInfo.birthday).format('yyyy-MM-dd') : '待完善' },
        { title: '身高', en: 'Height', content: studentInfo.height ? studentInfo.height + 'cm' : '待完善' },
        // { title: '站立摸高', en: 'Standing Reach', content: studentInfo.standingReach ? studentInfo.standingReach + 'cm' : '待完善' },
        { title: '监护人姓名', en: 'Guardian\'s Name', content: studentInfo.parentName ? studentInfo.parentName : '待完善' },
        { title: '住址', en: 'Address', content: studentInfo.address ? studentInfo.address : '待完善' },
        { title: '运动项目', en: 'Sport Event', content: studentInfo.sportItem ? studentInfo.sportItem : '待完善' },
        { title: '就读学校', en: 'Current School', content: studentInfo.school ? studentInfo.school : '待完善' },
        { title: '所获奖项', en: 'Awards', content: studentInfo.awardsItem ? studentInfo.awardsItem : '待完善' },
        { title: '专业特点', en: 'Speciality', content: studentInfo.trait ? studentInfo.trait : '待完善' }
      ]
      this.rightList = [
        { title: '性别', en: 'Sex', content: studentInfo.sex === 1 ? '男' : studentInfo.sex === 2 ? '女' : '待完善' },
        { title: '籍贯', en: 'Native Place', content: studentInfo.provinceName ? studentInfo.provinceName : '待完善' },
        { title: '证件号码', en: 'ID Number', content: studentInfo.idNo ? studentInfo.idNo : '待完善' },
        { title: '年龄', en: 'Age', content: studentInfo.age === 0 ? 0 : (studentInfo.age || '待完善') },
        { title: '体重', en: 'Weight', content: studentInfo.weight ? studentInfo.weight + 'kg' : '待完善' },
        // { title: '臂展', en: 'Wingspan', content: studentInfo.armReach ? studentInfo.armReach + 'cm' : '待完善' },
        { title: '监护人手机', en: 'Guardian\'s Mobile', content: studentInfo.parentMobile },
        { title: '所在省市', en: 'Province and City', content: (studentInfo.locationProvinceName ? studentInfo.locationProvinceName : '') + (studentInfo.locationCityName ? studentInfo.locationCityName : '待完善') },
        { title: '校区', en: 'Campus', content: studentInfo.schoolName ? studentInfo.schoolName : '待完善' },
        { title: '邮箱', en: 'Email', content: studentInfo.email ? studentInfo.email : '待完善' },
        { title: '首次报名', en: 'First time Register', content: studentInfo.sources === 0 ? '平台报名' : '后台录入' },
        { title: '备注', en: 'Remark', content: studentInfo.remark ? studentInfo.remark : '无' }
      ]
    },
    gotoChart () {
      this.$emit('goto')
    }
  }
}
</script>

<style lang="scss" scoped>
.el-row {
  .grid-content{
    margin-bottom: 20px;
    .detail_row{
      padding-bottom: 20px;
      line-height: 20px;
      vertical-align: top;
      .detail_row_left{
        width: 96%;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }
      .form-help{
        line-height: 14px;
      }
    }
    .avatar-wrapper{
      margin-bottom: 20px;
      .avatar{
        width:92px;
        height: 92px;
        border-radius: 50%;
      }
    }
  }
}
</style>
